﻿<!--_meta 作为公共模版分离出去-->
<include file='public/_meta'>
<!--/meta 作为公共模版分离出去-->
<style type="text/css">
.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -18px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}
.small-box:hover .icon {

    font-size: 95px;

}

.small-box>.inner {
    padding: 10px;
}
.small-box>.small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255,255,255,0.8);
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color: #00c0ef !important;
    color: #fff !important;
}
.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
    background-color: #00a65a !important;
    color: #fff !important;

}
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
    background-color: #f39c12 !important;
    color: #fff !important;

}
.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body {
    background-color: #dd4b39 !important;
    color: #fff !important;

}

</style>
<title>我的桌面</title>
</head>
<body>
<div class="page-container">
    <div class="row cl">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                  <h3>{$data['car_num']}</h3>

                  <p>车辆总数</p>
                </div>
                <div class="icon">
                  <i class="Hui-iconfont">&#xe64d;</i>
                </div>
                <a href="{:url('index/Cars/index')}" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-green">
            <div class="inner">
                <h3>{$data['secure']}<sup style="font-size: 20px"></sup></h3>
                <p>保险到期</p>
            </div>
            <div class="icon">
                <i class="Hui-iconfont">&#xe623;</i>
            </div>
            <a href="{:url('index/secure/index')}" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>{$data['repair']}</h3>

              <p>年检到期</p>
            </div>
            <div class="icon">
                <i class="Hui-iconfont">&#xe639;</i>
            </div>
            <a href="javascript:alert('敬请期待');" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
              <h3>65</h3>

              <p>维修中...</p>
            </div>
            <div class="icon">
                <i class="Hui-iconfont">&#xe63c;</i>
            </div>
            <a href="javascript:alert('敬请期待');" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
          </div>
        </div>
        <!-- ./col -->
    </div>
    <div class="row cl">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                  <h3>{$data['car_num']}</h3>

                  <p>在线车辆</p>
                </div>
                <div class="icon">
                  <i class="Hui-iconfont">&#xe690;</i>
                </div>
                <a href="{:url('index/Cars/index')}" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
                <h3>{$data['secure']}<sup style="font-size: 20px"></sup></h3>
                <p>未知离线</p>
            </div>
            <div class="icon">
                <i class="Hui-iconfont">&#xe691;</i>
            </div>
            <a href="{:url('index/secure/index')}" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>{$data['repair']}</h3>

              <p>已知离线</p>
            </div>
            <div class="icon">
                <i class="Hui-iconfont">&#xe681;</i>
            </div>
            <a href="javascript:alert('敬请期待');" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>65</h3>

              <p>未安装车机</p>
            </div>
            <div class="icon">
                <i class="Hui-iconfont">&#xe6c9;</i>
            </div>
            <a href="javascript:alert('敬请期待');" class="small-box-footer">More info <i class="Hui-iconfont">&#xe63d;</i></a>
          </div>
        </div>
        <!-- ./col -->
    </div>
    <div class="mb-30 mt-10">
        <div>
            <form id="search-form" class="text-c" method="get" onsubmit="return false;">
                <input type="text" class="input-text size-L mr-10" style="width:52%;border:1px solid #20a08a" placeholder="请输入车牌号" value="" id="search_text"/>
                <button class="btn btn-success size-L" onclick="cars_details('详情','{:url('index/cars/details')}','',450)">Search</button>
            </form>
        </div>
    </div>
<if condition="session('admin.agency_id')==1">
    <table class="table table-border table-bordered table-bg relevance">
        <thead>
            <tr>
                <th colspan="{:count($relevance[0])+1}" scope="col">租赁类型</th>
            </tr>
            <tr class="text-c">
                <th>统计</th>
                <foreach $rele_name as $value>
                    <th>{$value}</th>
                </foreach>
            </tr>
        </thead>
        <tbody>
            <foreach name="$relevance[0]" item="vo">
                <tr class="text-c number">
                    <td>{$vo['name']}</td>
                    <foreach $vo['value'] as $num>
                        <td>{$num}</td>
                    </foreach>
                </tr>
            </foreach>
            <tr class="count text-c"></tr>
            <tr class="text-c">
                <th colspan="{:count($relevance[0])+1}" scope="col" class="c-red f-16">合计 : {$data['car_num']}</th>
            </tr>
        </tbody>
    </table>
    <div class="line mt-40"></div>
    <div class="cl mt-20" style="height: 500px">
        
            <div id="revelance" style=" max-width: 100%;height: 500px;display: block;"></div>
        
        <!-- <div class="col-xs-4 col-sm-4">
            <img src="__PUBLIC__/static/images/agency_city_map.png" class="img-responsive" style="height: 500px" />
        </div> -->
    </div>
</if>
    <div class="mt-40 f-16">
        <h4 class="text-c">电动车综合月报表</h4>
        <p>2018年03月共有1000辆车注册，其中在线车辆950辆，故障车辆50辆，在当日有位置信息车辆700辆，3日内有位置信息车辆800辆，7日内有位置信息车辆950辆.</p>
        <p>2018年03月在线有行驶情况车辆为900辆，未行驶车辆50辆。行驶车辆平均耗电量为100W；平均行驶里程为200公里；平均点火时长为8小时；平均最高时速为80公里/小时。车辆最高电耗为200W；最高行驶里程为300公里；最长点火时长为16小时；最高时速为120公里/小时。</p>
        <p>通过分析得出：90%在线车辆行驶每公里平均电耗浮动情况在5%以内；80%车辆时速和整体平均时速浮动情况在10%以内.</p>
        <h4 class="text-c">热点区域描述</h4>
        <div class="line mt-20"></div>
        <div class="cl mt-30">
            <div class="col-xs-6 col-sm-6" id="chart1" style="height:288px"></div>
            <div class="col-xs-6 col-sm-6" id="chart2" style="height:288px "></div>
        </div>
        <div class="line mt-20"></div>
        <div class="cl mt-40">
            <div class="col-xs-6 col-sm-6">
                <h5 class="text-c">平均耗电最低的5辆车</h5>
                <table class="table table-border table-bordered table-bg">
                    <thead>
                        <tr class="text-c">
                            <th>车牌号码</th>
                            <th>行驶里程</th>
                            <th>平均耗电</th>
                            <th>最高时速</th>
                            <th>平均时速</th>
                            <th>点火时长</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10002</td>
                            <td>300</td>
                            <td>4</td>
                            <td>110</td>
                            <td>80</td>
                            <td>9</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10002</td>
                            <td>300</td>
                            <td>4</td>
                            <td>110</td>
                            <td>80</td>
                            <td>9</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10002</td>
                            <td>300</td>
                            <td>4</td>
                            <td>110</td>
                            <td>80</td>
                            <td>9</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-6 col-sm-6" id="chart3" style="height:350px"></div>
        </div>
        <div class="line mt-20"></div>
        <div class="cl mt-40">
            <div class="col-xs-6 col-sm-6">
                <h5 class="text-c">平均耗电最高的5辆车</h5>
                <table class="table table-border table-bordered table-bg">
                    <thead>
                        <tr class="text-c">
                            <th>车牌号码</th>
                            <th>行驶里程</th>
                            <th>平均耗电</th>
                            <th>最高时速</th>
                            <th>平均时速</th>
                            <th>点火时长</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10002</td>
                            <td>300</td>
                            <td>4</td>
                            <td>110</td>
                            <td>80</td>
                            <td>9</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10002</td>
                            <td>300</td>
                            <td>4</td>
                            <td>110</td>
                            <td>80</td>
                            <td>9</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10001</td>
                            <td>200</td>
                            <td>5</td>
                            <td>120</td>
                            <td>80</td>
                            <td>8</td>
                        </tr>
                        <tr class="text-c">
                            <td>冀A10002</td>
                            <td>300</td>
                            <td>4</td>
                            <td>110</td>
                            <td>80</td>
                            <td>9</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-6 col-sm-6" id="chart4" style="height:350px"></div>
        </div>
        <h4 class="text-c">与7月内平均情况对比</h4>
        <div class="line mt-20"></div>
        <p class="mt-10">2018年03月车辆在线情况比7日内平均车辆在线数量下降3%；平均耗电增加1%；平均行驶里程增加2%；平均点火时长增加10%；平均最高时速增加5%</p>
        <div class="cl mt-10">
            <div class="col-xs-12 col-sm-12" id="chart5" style="height: 350px"></div>   
        </div>
        <h4 class="text-c">建议关注车辆</h4>
        <div class="line mt-30"></div>
        <p class="mt-10">下表列出自2018年0-4月至2018年03月，每天平均耗电均高于总体平均电耗的车辆，这些车辆可能存在隐性故障或司机有不良驾驶习惯，需要进行关注并解决</p>
        <h5 class="text-c mt-20">建议关注车辆</h5>
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <th>车牌号码</th>
                    <th>2018年0-4月</th>
                    <th>2018年0-3月</th>
                    <th>2018年0-2月</th>
                    <th>2018年0-1月</th>
                    <th>2018年00月</th>
                    <th>2018年01月</th>
                    <th>2018年02月</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-c">
                    <td>冀A10001</td>
                    <td>4>3</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                </tr>
                <tr class="text-c">
                    <td>冀A10002</td>
                    <td>4>3</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                </tr>
                <tr class="text-c">
                    <td>冀A10004</td>
                    <td>4>3</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                    <td>3>2</td>
                </tr>
            </tbody>
        </table>
        <div class="mt-20">
            <h5 class="text-c">2018年03月车辆情况</h5>
            <div class="line mt-20"></div>
            <div class="mt-20 mb-10">
                <form class="form-inline" style="text-align: center;">
                    <div class="form-group">
                        <label class="carno">车牌号码</label>
                        <input type="text" class="form-control input-text size-S" placeholder="请输入车牌号码" style="width: 140px;" id="carno">
                        <button type="button" class="btn btn-primary radius size-S" id="btn-search">
                            查询
                        </button>
                        <a class="f-14">下载2018年03月车辆情况明细</a>
                    </div>
                </form>
            </div>
            <table class="table table-border table-bordered table-bg">
                <thead>
                    <tr class="text-c">
                        <th>车牌号码</th>
                        <th>终端号</th>
                        <th>行驶里程</th>
                        <th>平均耗电</th>
                        <th>最高时速</th>
                        <th>平均时速</th>
                        <th>点火时长</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="text-c">
                        <td>冀A10001</td>
                        <td>10000001</td>
                        <td>200</td>
                        <td>5</td>
                        <td>120</td>
                        <td>80</td>
                        <td>8</td>
                    </tr>
                    <tr class="text-c">
                        <td>冀A10002</td>
                        <td>10000002</td>
                        <td>300</td>
                        <td>4</td>
                        <td>110</td>
                        <td>80</td>
                        <td>9</td>
                    </tr>
                    <tr class="text-c">
                        <td>冀A10003</td>
                        <td>10000003</td>
                        <td>200</td>
                        <td>5</td>
                        <td>120</td>
                        <td>80</td>
                        <td>8</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<footer class="footer mt-20">
    <div class="container">
        <p>感谢jQuery、layer、laypage、Validform、UEditor、My97DatePicker、iconfont、Datatables、WebUploaded、icheck、highcharts、bootstrap-Switch<br>
            Copyright &copy;2015-2017 H-ui.admin v3.1 All Rights Reserved.<br>
            本后台系统由<a href="__PUBLIC__/http://www.h-ui.net/" target="_blank" title="H-ui前端框架">H-ui前端框架</a>提供前端技术支持</p>
    </div>
</footer>
<!--_footer 作为公共模版分离出去-->
<include file='public/_footer'>
<!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__PUBLIC__/lib/echarts/v4.0/echarts.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
$(function(){
    var url = "{:url('index/Record/ajaxGetCarSn')}";
    // var searchURL = "/cases/search.action";
    var isClicked = false;
    var defauntkeyword = "请输入关键词";
    $("#search_text").autocomplete(url, {
        scroll:false,
        selectFirst:false,
        delay:5,
        max:10,
        dataType:"json",//ajax的跨域，必须用jsonp,jQuery自动会加一个callback参数,后台要获得callback参数，并写回来
            //自定义提示
        tips:function(data) {
                //这里的data是跟formatItem 的data是一样的，所以格式也一样
            return data.pinyin;
        },
        parse: function(data) {
            if(data==null||typeof(data)=="undefined"||data.length==0){
                return null;
            }
            // console.log(data);

            // data = data.keylist;
            var rows = [];
            for(var i=0; i<data.length; i++){
                rows[rows.length] = {
                    data:data[i],//这里data是对象数组，格式[{key:aa,address:nn},{key:aa,address:nn}]
                    value:data[i].car_sn,
                    result:data[i].car_sn
                };
            } console.log(rows);
            return rows;
        },
        extraParams: {query:function (){return $('#search_text').val();}},
        formatItem: function(data, i, total) {  //就是下拉框显示的内容，可以有格式之类的
            return "<p class=''>"+data.car_sn+"</p>";
        },
        formatMatch: function(data, i, total) {  //要匹配的内容
            return data.car_sn;
        },
        formatResult: function(data) {  //最终在inputText里显示的内容，就是以后要搜索的内容
            return data.car_sn;
        }
    }).result(function(e, data) {
        if(!isClicked) {
            // startSearch();
        }
        if(data.car_id){
            $("#search_text").attr("value",data.car_id);
        }
    });

}); 
    
function cars_details(title,url,w,h) {

    var value = $("#search_text").attr("value");
    layer_show(title,url+'?id='+value,w,h);
} 

    var relevance = $('.relevance');
    var count = relevance.find('.count')
    var number = relevance.find('.number');
    var gxz=[];
    number.each(function(){
        let hang = $(this).find('td');
        hang.each(function(index){
            if(index > 0){
                if(isNaN(gxz[index])){
                    gxz[index] = 0;
                }
                gxz[index] =Math.floor(hang[index].innerHTML)+Math.floor(gxz[index]);
            }
        })    
    })
    var countStr = '<td>总数</td>';
    gxz.forEach(function(item){
        countStr +='<td>'+item+'</td>';
    })
    count.html(countStr);

    var nowDay,nowDayBefore7,nowDayBefore6,nowDayBefore5,nowDayBefore4,nowDayBefore3,nowDayBefore2,nowDayBefore1;
$(document).ready(function () {
    var nowdate = new Date();
    nowDay = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() + 1) + "月";
    nowDayBefore7 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() -6) + "月";
    nowDayBefore6 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() -5) + "月";
    nowDayBefore5 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() -4) + "月";
    nowDayBefore4 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() -3) + "月";
    nowDayBefore3 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() -2) + "月";
    nowDayBefore2 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth() -1) + "月";
    nowDayBefore1 = nowdate.getFullYear() + "年" + cunDate(nowdate.getMonth()) + "月";
    function cunDate(date) {
        if (date < 10) {
            return "0" + date;
        }
        return date;
    }
    $(".nowDay").html(nowDay);
    $("#nowDayBefore7").html(nowDayBefore7);
    $("#nowDayBefore7Tr").html("<td>车牌号码</td><td>"+nowDayBefore7+"</td><td>"+nowDayBefore6+"</td><td>"+nowDayBefore5+"</td><td>"
        +nowDayBefore4+"</td><td>"+nowDayBefore3+"</td><td>"+nowDayBefore2+"</td><td>"+nowDayBefore1+"</td>");
    //这里写执行的方法
    iniChart1("chart1");
    iniChart2("chart2");
    iniChart3("chart3");
    iniChart4("chart4");
    iniChart5("chart5");
});

//车辆在线情况
function iniChart1(chart1){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '车辆在线情况',
            subtext: nowDay,
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['当日在线车辆','故障车辆','当日离线车辆']
        },
        series : [
            {
                name: '车辆状态',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:700, name:'当日在线车辆'},
                    {value:50, name:'故障车辆'},
                    {value:250, name:'当日离线车辆'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//车辆运行情况
function iniChart2(chart2){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart2'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '车辆运行情况',
            subtext: nowDay,
            x:'center'
        },
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name:'速度',
                type:'gauge',
                z: 3,
                min:0,
                max:220,
                splitNumber:11,
                radius: '60%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length :20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontStyle: 'italic'
                    }
                },
                detail : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 80, name: '平均时速'}]
            },
            {
                name:'平均耗电',
                type:'gauge',
                center : ['25%', '30%'],    // 默认全局居中
                radius : '50%',
                min:0,
                max:7,
                endAngle:45,
                splitNumber:7,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length :20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title : {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                },
                detail : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 2, name: '平均耗电'}]
            },
            {
                name:'点火时长',
                type:'gauge',
                center : ['75%', '30%'],    // 默认全局居中
                radius : '50%',
                min:0,
                max:24,
                startAngle:135,
                splitNumber:6,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length :20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title : {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                },
                detail : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 10, name: '点火时长'}]
            },
            {
                name:'行驶里程',
                type:'gauge',
                center : ['75%', '70%'],    // 默认全局居中
                radius : '50%',
                min:0,
                max:600,
                startAngle:90,
                endAngle:-135,
                splitNumber:5,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length :20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title : {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                },
                detail : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 200, name: '行驶里程'}]
            }

        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//最低油耗车辆情况
function iniChart3(chart3){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart3'));

    // 指定图表的配置项和数据
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['里程','耗电','最高时速','平均时速','点火时长']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['冀A10001','冀A10002','冀A10003','冀A10004','冀A10005']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'里程',
                type:'bar',
                data:[320, 332, 301, 334, 390]
            },
            {
                name:'耗电',
                type:'bar',
                data:[120, 132, 101, 134, 90]
            },
            {
                name:'最高时速',
                type:'bar',
                stack: '最高时速',
                data:[220, 182, 191, 234, 290]
            },
            {
                name:'平均时速',
                type:'bar',
                stack: '最高时速',
                data:[150, 232, 201, 154, 190]
            },
            {
                name:'点火时长',
                type:'bar',
                data:[62, 82, 91, 84, 109]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//最高油耗车辆情况
function iniChart4(chart4){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart4'));

    // 指定图表的配置项和数据
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['里程','耗电','最高时速','平均时速','点火时长']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['冀A10001','冀A10002','冀A10003','冀A10004','冀A10005']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'里程',
                type:'bar',
                data:[320, 332, 301,330, 320]
            },
            {
                name:'耗电',
                type:'bar',
                data:[120, 132, 101,230, 210]
            },
            {
                name:'最高时速',
                type:'bar',
                stack: '最高时速',
                data:[220, 182, 191, 234, 310]
            },
            {
                name:'平均时速',
                type:'bar',
                stack: '最高时速',
                data:[150, 232, 201, 154, 410]
            },
            {
                name:'点火时长',
                type:'bar',
                data:[62, 82, 91, 84, 120]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
function iniChart5(chart5){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart5'));

    // 指定图表的配置项和数据
    // 指定图表的配置项和数据
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['里程','耗电','最高时速','平均时速','点火时长']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['当日平均','七日平均',nowDayBefore7,nowDayBefore6,nowDayBefore5,nowDayBefore4,nowDayBefore3,nowDayBefore2,nowDayBefore1]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'里程',
                type:'bar',
                data:[320, 332, 301, 334, 390, 330, 320,100,120]
            },
            {
                name:'耗电',
                type:'bar',
                data:[120, 132, 101, 134, 90, 230, 210,100,120]
            },
            {
                name:'最高时速',
                type:'bar',
                stack: '最高时速',
                data:[220, 182, 191, 234, 290, 330, 310,100,120]
            },
            {
                name:'平均时速',
                type:'bar',
                stack: '最高时速',
                data:[150, 232, 201, 154, 190, 330, 410,100,120]
            },
            {
                name:'点火时长',
                type:'bar',
                data:[62, 82, 91, 84, 109, 110, 120,100,120]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}


var releChart = document.getElementById('revelance');
var releChartInit = echarts.init(releChart);
var releApp = {};
releOption = null;
releApp.title = '堆叠条形图';

releOption = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: {:json_encode($rele_name)}
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: {:json_encode($relevance[1][1]['name'])}
    },
    series: [
    <foreach name="$relevance[1][0]" item="vo" key="k">    
        {
            name: '{$rele_name[$k]}',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: {:json_encode($vo)}
        },
    </foreach>
    ]
};
if (releOption && typeof releOption === "object") {
    releChartInit.setOption(releOption, true);
}


</script>

</body>
</html>